<template>
    <div>
        <Breadcrumb></Breadcrumb>
        <el-card>
            <el-button type="primary" @click="add">添加分类</el-button>
            <!-- data数据 必须是树形结构 -->
            <!-- columns 设置属性 -->
            <!-- border边框 -->
            <!-- show-row-hover="false" 高亮显示为false -->
            <!-- selection-type="false 有>箭头，可以展开 -->
            <!-- expand-type="false 有复选框 可以选中 -->
            <tree-table :data="splist" :columns="defaultProps" :selection-type="false" :expand-type="false"
                index-text="索引" :show-row-hover="false" show-index border>
                <!-- 是否有效 -->
                <template slot="isok" slot-scope="scope">
                    <i class="el-icon-success" style="color: lightgreen" v-if="scope.row.cat_deleted === false"></i>
                </template>
                <!-- 排序 -->
                <template slot="sorts" slot-scope="scope">
                    <el-tag v-if="scope.row.cat_level === 0">一级</el-tag>
                    <el-tag type="success" v-if="scope.row.cat_level === 1">二级</el-tag>
                    <el-tag type="warning" v-if="scope.row.cat_level === 2">三级</el-tag>
                </template>
                <!-- 操作 -->
                <template slot="caozuo" slot-scope="scope">
                    <el-button type="primary" size="mini" @click="xg(scope.row)">编辑</el-button>
                    <el-button type="danger" size="mini" @click="del(scope.row.cat_id)">删除</el-button>
                </template>
            </tree-table>

            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="query.pagenum" :page-sizes="[5, 8, 10, 12]" :page-size="query.pagesize"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </el-card>
        <Dialog :options="options" :myDialog="myDialog" :addDialog="addDialog" @suibain="gets()"></Dialog>
    </div>
</template>

<script>
import Breadcrumb  from "@/mixins/mixin.vue";
import { cateList, delCate } from "@/utils/axios/categoriesApi"
import Dialog from "@/components/categoriesDialog.vue"
export default {
    components: { Dialog,Breadcrumb },
    data () {
        return {
            splist: [],
            // data中的数据
            defaultProps: [
                {
                    label: "分类名称",
                    prop: "cat_name",
                },
                {
                    label: "是否有效",
                    // 表示当前列为模板列
                    type: "template",
                    // 表示当前这一列的模板名称
                    template: "isok",
                },
                {
                    label: "排序",
                    type: "template",
                    template: "sorts",
                },
                {
                    label: "操作",
                    type: "template",
                    template: "caozuo",
                },
            ],
            query: {
                type: "",
                pagenum: 1,
                pagesize: 5
            },
            total: 0,
            options: [],
            myDialog: {
                type: "",
                title: "",
                flag: false
            },
            addDialog: {
                cat_name: "",
                cat_pid: 0,
                cat_level: 0
            }
        };
    },

    mounted () {
        this.gets()
        this.hets()
    },

    methods: {
        // 分类页面数据
        async gets () {
            const { data } = await cateList(this.query)
            // console.log(data);
            this.splist = data.data.result
            this.total = data.data.total
        },
        async hets () {
            const { data } = await cateList({ type: 2 })
            // console.log(data);
            this.options = data.data

        },
        // 分页
        handleSizeChange (val) {
            // console.log(`每页 ${val} 条`);
            this.query.pagesize = val
            this.gets()
        },
        handleCurrentChange (val) {
            // console.log(`当前页: ${val}`);
            this.query.pagenum = val
            this.gets()
        },
        // 添加分类
        add () {
            (this.addDialog = {
                cat_name: "",
                cat_pid: 0,
                cat_level: 0
            }),
                (this.myDialog = {
                    type: "add",  
                    title: "添加分类",
                    flag: true,
                    isshow: false
                })
        },
        // 修改分类
        xg (row) {
            console.log(row);
            this.addDialog = {
                cat_name: row.cat_name,
                cat_pid: row.cat_id,
                cat_level: 0
            },
                this.myDialog = {
                    type: "edit",
                    title: "编辑分类",
                    flag: true,
                    isshow: true
                }
        },
        // 删除分类
        del (id) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const { data } = await delCate(id)
                //    console.log(data);
                if (data.meta.status == 200) {
                    this.$message.success(data.meta.msg)
                    this.gets()
                } else {
                    this.$message.error(data.meta.msg)
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
    },
};
</script>

<style lang="scss" scoped>

</style>